<template>
  <div class="absolute inset-0 w-full h-screen flex-center z-folderWindow">
    <!-- 黑色蒙层 -->
    <div
      class="mask absolute inset-0 bg-black/60 z-folderWindowMask"
      dragTester="folder-marker"
      ref="mask"
      :data-dropid="items.id"
    ></div>

    <div
      class="z-folderWindow relative bg-white/90 rounded-[60px] px-[30px] py-[45px] w-full max-w-[984px] mx-auto transition-transform duration-300"
      dragTester="folder-alert"
      v-on-click-outside="hideModel"
      :data-dropid="items.id"
      :class="
        contextMenuStore.menuActive === 'editIcon' ? 'translate-x-[204px]' : ''
      "
      @contextmenu.stop.prevent="showBlackContextMenu"
    >
      <!-- 白色列表框 -->
      <div class=" ">
        <div class="flex">
          <TransitionGroup :name="canTransition ? 'folder' : ''">
            <div
              v-for="(item, index) in items.children"
              :key="item.id"
              viewType="itemContainer"
              :dragTester="'inner-' + item.type"
              :data-dropid="item.id"
              class="px-[30px] py-[15px] icon-container z-[1] min-w-[72px] max-w-[132px]"
            >
              <Icon
                class="view-item"
                :class="{ dragging: draggingId === item.id }"
                :data="item"
                :editing="contextMenuStore.menuActive === 'editFolderBlack'"
                @mousedown="onMouseDown($event, item)"
                @contextmenu.stop.prevent="showContextMenu(item, $event)"
                @remove="deleteIcon"
              ></Icon>
            </div>
          </TransitionGroup>
        </div>
      </div>
      <div
        class="absolute left-[50%] top-[-72px] ml-[-125px] flex h-[72px] w-[250px] justify-center"
      >
        <input
          type="text"
          class="folder-title h-[52px] w-[230px] rounded-[16px] bg-black/0 px-[10px] text-center text-[28px] text-white decoration-color-none transition-[background] outline-none"
          maxlength="16"
          v-model="title"
          @blur="changeTitle"
          @keyup.enter="changeTitle"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, inject, watchEffect } from "vue";
import Icon from "./Icon.vue";
import { vOnClickOutside } from "@vueuse/components";
import { useContextMenuStore } from "../store";

const mousedown = inject("mousedown") as (event: MouseEvent, item: any) => void;
const draggingId = inject("draggingId");
const deleteFolderIcon = inject("deleteFolderIcon") as (item: any) => void;

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
const canTransition = ref(false);
watchEffect(() => {
  if (props.visible) {
    setTimeout(() => {
      canTransition.value = true;
    }, 300);
  } else {
    canTransition.value = false;
  }
});

const items = ref(props.data);
const title = ref(items.value.name);

watchEffect(() => {
  items.value = props.data;
  title.value = items.value.name;
});
const comp = ref("div");

const emits = defineEmits(["close", "changeName"]);

const mask = ref(null);
const hideModel = (event) => {
  if (mask.value) {
    if (event.target === mask.value) {
      emits("close");
    }
  } else {
    emits("close");
  }
};

const changeTitle = () => {
  emits("changeName", title);
};

let stayTimer = null;

const onMouseDown = (event: MouseEvent, item: any) => {
  event.stopPropagation();
  event.preventDefault();
  // comp.value = "TransitionGroup";
  // 使用父窗口的mouseDown
  mousedown(event, item);
  // document.addEventListener("mousemove", onMouseMove);
  // document.addEventListener("mouseup", onMouseUp);
};

const deleteIcon = (item) => {
  deleteFolderIcon(item);
};

const menuItems = ref([]);

const contextMenuStore = useContextMenuStore();
function showContextMenu(item, event) {
  menuItems.value = [
    { label: "编辑文件夹", value: "editFolderBlack" },
    { label: "编辑图标", value: "editFolderIcon" },
    { label: "删除图标", value: "deleteFolderIcon" },
  ];
  contextMenuStore.setTarget(item);
  contextMenuStore.setContextMenu(menuItems.value);
  contextMenuStore.setPosition(event);
}

function showBlackContextMenu(event) {
  menuItems.value = [
    // { label: "打开全部", value: "openAll" },
    { label: "编辑文件夹", value: "editFolderBlack" },
  ];
  contextMenuStore.setTarget(items);
  contextMenuStore.setContextMenu(menuItems.value);
  contextMenuStore.setPosition(event);
}

// watchEffect(() => {
//   // if (contextMenuStore.menuActive === "openAll") {
//   //   items.value.children.forEach((item) => {
//   //     // 浏览器不支持打开多个窗口
//   //     window.open(item.target, "_blank");
//   //   });
//   //   contextMenuStore.menuActive = "";
//   // }
// });
</script>
<style lang="scss" scoped>
:deep(.icon-box) {
  width: auto;
  height: auto;
  .icon-title {
    color: #000;
  }
}

.folder-title {
  &:hover,
  &:focus {
    border: 1px solid #ffffff1f;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
  }
}

.folder-move {
  transition: transform 0.3s ease;
}
.folder-enter,
.folder-enter-to {
  transition: none;
}

:deep(.dragging) {
  opacity: 0 !important;
  cursor: pointer;
  z-index: 0;
}
</style>
